<!DOCTYPE html />
<html>
<head>
    <title> Hello MiniUI!</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    
    <!--jQuery js-->
    <script src="../scripts/jquery-1.6.2.min.js" type="text/javascript"></script>
    <!--MiniUI-->
    <link href="../scripts/miniui/themes/default/miniui.css" rel="stylesheet" type="text/css" />        
    <script src="../scripts/miniui/miniui.js" type="text/javascript"></script>
</head>
<body>
	<div style="width:800px;">
        <div class="mini-toolbar" style="border-bottom:0;padding:0px;">
            <table style="width:100%;">
                <tr>
                    <td style="width:100%;">
                        <a class="mini-button" iconCls="icon-add" onclick="addRow()" plain="true" tooltip="增加...">增加</a>
                        <a class="mini-button" iconCls="icon-remove" onclick="removeRow()" plain="true">删除</a>
                        <span class="separator"></span>
                        <a class="mini-button" iconCls="icon-save" onclick="saveData()" plain="true">保存</a>            
                    </td>
                    <td style="white-space:nowrap;">
                        <input id="key" class="mini-textbox" emptyText="请输入姓名" style="width:150px;" onenter="onKeyEnter"/>   
                        <a class="mini-button" onclick="search()">查询</a>
                    </td>
                </tr>
            </table>           
        </div>
    </div>
    <div id="datagrid1" class="mini-datagrid" style="width:800px;height:250px;"
    url="../demo/data/AjaxService.jsp?method=SearchEmployees"  idField="id" 
    allowResize="true" allowCellEdit="true" allowCellSelect="true" multiSelect="true" editNextOnEnterKey="true"  editNextRowCell="true">
	    <div property="columns">
	        <div type="indexcolumn"></div>
	        <div field="loginname" width="120" headerAlign="center" allowSort="true">员工帐号
	        	<!--datagrid行编辑 textbox editor-->
	            <input property="editor" class="mini-textbox" style="width:100%;" minWidth="200"/>
	        </div>
	        <div field="name" width="120" allowSort="true">姓名
	        	<!--textbox editor-->
	            <input property="editor" class="mini-textbox" style="width:100%;"/>
	        </div>
	        <div field="age" width="60" allowSort="true">年龄
	        	<!--textbox editor-->
	            <input property="editor"  class="mini-spinner" 
	                minValue="0" maxValue="200" value="25" style="width:100%;"/>
	        </div>
	        <div field="birthday" width="100" dateFormat="yyyy-MM-dd" allowSort="true">出生日期
	        	<!--textbox editor-->
	            <input property="editor" class="mini-datepicker" style="width:100%;"/>
	        </div>
	    </div>
	</div> 
<script type="text/javascript">
mini.parse();

var grid = mini.get("datagrid1");
grid.load();


//////////////////////////////////////////////////////

function search() {
    var key = mini.get("key").getValue();

    grid.load({ key: key });
}

function addRow() {          
    var newRow = { name: "New Row" };
    grid.addRow(newRow, 0);

    grid.beginEditCell(newRow, "LoginName");
}
function saveData() {            
    
    var data = grid.getChanges();
    var json = mini.encode(data);
    
    grid.loading("保存中，请稍后......");
    $.ajax({
        url: "../demo/data/AjaxService.jsp?method=SaveEmployees",
        data: { data: json },
        type: "post",
        success: function (text) {
            grid.reload();
        },
        error: function (jqXHR, textStatus, errorThrown) {
            alert(jqXHR.responseText);
        }
    });
}

 
</script>
</body>
</html>